<!-- 数据面板组件 -->
<template>
  <div class="data-panel">
    <el-tabs v-model="rightActiveTab" stretch class="panel-tabs">
      <!-- 实时数据标签页 -->
      <el-tab-pane label="实时数据" name="realtime">
        <div class="realtime-data">
          <!-- 平台状态 -->
          <div class="data-section">
            <h4>平台状态</h4>
            <div class="data-grid">
              <div class="data-item" v-for="platform in platformData" :key="platform.id">
                <div class="platform-header">
                  <el-icon><Position /></el-icon>
                  <span>{{ platform.name }}</span>
                  <el-tag :type="platform.status === 'active' ? 'success' : 'warning'" size="small">
                    {{ platform.status === 'active' ? '在线' : '离线' }}
                  </el-tag>
                </div>
                <div class="platform-metrics">
                  <div class="metric">
                    <span class="label">位置:</span>
                    <span class="value">{{ platform.position }}</span>
                  </div>
                  <div class="metric">
                    <span class="label">速度:</span>
                    <span class="value">{{ platform.speed }} km/h</span>
                  </div>
                  <div class="metric">
                    <span class="label">航向:</span>
                    <span class="value">{{ platform.heading }}°</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 信号统计 -->
          <div class="data-section">
            <h4>信号统计</h4>
            <div class="signal-stats">
              <div class="stat-item">
                <el-icon><Connection /></el-icon>
                <div class="stat-content">
                  <div class="stat-value">{{ signalStats.totalSignals }}</div>
                  <div class="stat-label">总信号数</div>
                </div>
              </div>
              <div class="stat-item">
                <el-icon><Warning /></el-icon>
                <div class="stat-content">
                  <div class="stat-value">{{ signalStats.threats }}</div>
                  <div class="stat-label">威胁信号</div>
                </div>
              </div>
              <div class="stat-item">
                <el-icon><Check /></el-icon>
                <div class="stat-content">
                  <div class="stat-value">{{ signalStats.identified }}</div>
                  <div class="stat-label">已识别</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 事件日志标签页 -->
      <el-tab-pane label="事件日志" name="events">
        <div class="event-log">
          <div class="log-controls">
            <el-select :model-value="logFilter" @update:model-value="logFilter = $event" size="small" placeholder="筛选事件">
              <el-option label="全部" value="all"></el-option>
              <el-option label="威胁" value="threat"></el-option>
              <el-option label="告警" value="warning"></el-option>
              <el-option label="信息" value="info"></el-option>
            </el-select>
            <el-button size="small" @click="clearLogs">清空</el-button>
          </div>
          
          <div class="log-list">
            <div 
              v-for="event in filteredEvents" 
              :key="event.id"
              class="log-item"
              :class="event.type"
            >
              <div class="log-time">{{ formatTime(event.timestamp) }}</div>
              <div class="log-content">
                <div class="log-title">{{ event.title }}</div>
                <div class="log-desc">{{ event.description }}</div>
              </div>
              <el-icon class="log-icon">
                <Warning v-if="event.type === 'threat'" />
                <InfoFilled v-else-if="event.type === 'warning'" />
                <Select v-else />
              </el-icon>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 分析报告标签页 -->
      <el-tab-pane label="分析报告" name="analysis">
        <div class="analysis-report">
          <div class="report-summary">
            <h4>推演摘要</h4>
            <div class="summary-metrics">
              <div class="metric-card">
                <div class="metric-title">仿真时长</div>
                <div class="metric-value">{{ formatDuration(simulationDuration) }}</div>
              </div>
              <div class="metric-card">
                <div class="metric-title">检测事件</div>
                <div class="metric-value">{{ eventStats.total }}</div>
              </div>
              <div class="metric-card">
                <div class="metric-title">威胁等级</div>
                <div class="metric-value">{{ threatLevel }}</div>
              </div>
            </div>
          </div>

          <div class="report-actions">
            <el-button type="primary" @click="generateReport">
              <el-icon><Document /></el-icon>
              生成报告
            </el-button>
            <el-button @click="exportData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Position,
  Connection,
  Warning,
  Check,
  InfoFilled,
  Select,
  Document,
  Download
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  platformData: {
    type: Array,
    default: () => []
  },
  signalStats: {
    type: Object,
    default: () => ({
      totalSignals: 0,
      threats: 0,
      identified: 0
    })
  },
  eventLog: {
    type: Array,
    default: () => []
  },
  simulationDuration: {
    type: Number,
    default: 0
  }
})

// Emits
const emit = defineEmits([
  'tab-change',
  'clear-logs',
  'generate-report',
  'export-data'
])

// 状态数据
const rightActiveTab = ref('realtime')
const logFilter = ref('all')

// 计算属性
const filteredEvents = computed(() => {
  if (logFilter.value === 'all') {
    return props.eventLog
  }
  return props.eventLog.filter(event => event.type === logFilter.value)
})

const eventStats = computed(() => {
  return {
    total: props.eventLog.length,
    threats: props.eventLog.filter(e => e.type === 'threat').length,
    warnings: props.eventLog.filter(e => e.type === 'warning').length
  }
})

const threatLevel = computed(() => {
  const threats = eventStats.value.threats
  if (threats > 10) return '高'
  if (threats > 5) return '中'
  return '低'
})

// 方法定义
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
}

const formatDuration = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  }
  return `${minutes}分钟`
}

const clearLogs = () => {
  emit('clear-logs')
  ElMessage.success('事件日志已清空')
}

const generateReport = () => {
  emit('generate-report')
  ElMessage.success('分析报告生成中...')
}

const exportData = () => {
  emit('export-data')
  ElMessage.success('数据导出中...')
}

// 监听标签页切换
const handleTabChange = (tabName) => {
  emit('tab-change', tabName)
}

// 暴露当前激活的标签页
defineExpose({
  rightActiveTab
})
</script>

<style scoped>
.data-panel {
  background: #263445;
  position: relative;
  height: 100%;
}

.panel-tabs {
  height: 100%;
}

.panel-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
}

.panel-tabs :deep(.el-tabs__content) {
  height: calc(100% - 5vh);
  overflow-y: auto;
  padding: 1.5vh;
}

.panel-tabs :deep(.el-tabs__item) {
  color: #bfcbd9 !important;
  background: transparent !important;
}

.panel-tabs :deep(.el-tabs__item.is-active) {
  color: #409EFF !important;
}

.panel-tabs :deep(.el-tabs__item:hover) {
  color: #409EFF !important;
}

.panel-tabs :deep(.el-tabs__active-bar) {
  background-color: #409EFF !important;
}

/* 实时数据 */
.realtime-data {
  height: 100%;
}

.data-section {
  margin-bottom: 3vh;
}

.data-section h4 {
  margin: 0 0 1.5vh 0;
  color: #bfcbd9;
  font-size: 1rem;
}

.data-grid {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.data-item {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
}

.platform-header {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  margin-bottom: 1vh;
}

.platform-header span {
  color: #bfcbd9;
  font-weight: 500;
}

.platform-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.metric {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.metric .label {
  color: #8591a3;
}

.metric .value {
  color: #bfcbd9;
  font-family: 'Monaco', 'Consolas', monospace;
}

.signal-stats {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #409EFF;
}

.stat-label {
  font-size: 0.8rem;
  color: #8591a3;
}

/* 事件日志 */
.event-log {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.log-controls {
  display: flex;
  gap: 1vw;
  margin-bottom: 1.5vh;
}

.log-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.log-item {
  display: flex;
  align-items: flex-start;
  gap: 1vw;
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  border-left: 4px solid transparent;
}

.log-item.threat {
  border-left-color: #F56C6C;
}

.log-item.warning {
  border-left-color: #E6A23C;
}

.log-item.info {
  border-left-color: #409EFF;
}

.log-time {
  font-size: 0.8rem;
  color: #8591a3;
  font-family: 'Monaco', 'Consolas', monospace;
  min-width: 6vw;
}

.log-content {
  flex: 1;
}

.log-title {
  color: #bfcbd9;
  font-weight: 500;
  margin-bottom: 0.5vh;
}

.log-desc {
  font-size: 0.85rem;
  color: #8591a3;
}

.log-icon {
  margin-top: 0.2vh;
}

/* 分析报告 */
.analysis-report {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.report-summary {
  margin-bottom: 3vh;
}

.report-summary h4 {
  margin: 0 0 1.5vh 0;
  color: #bfcbd9;
}

.summary-metrics {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.metric-card {
  background: #1f2d3d;
  border-radius: 0.8vh;
  padding: 1.5vh;
  text-align: center;
}

.metric-title {
  font-size: 0.8rem;
  color: #8591a3;
  margin-bottom: 0.5vh;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #409EFF;
}

.report-actions {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-top: auto;
}

/* 滚动条样式 */
.panel-tabs :deep(.el-tabs__content)::-webkit-scrollbar,
.log-list::-webkit-scrollbar {
  width: 6px;
}

.panel-tabs :deep(.el-tabs__content)::-webkit-scrollbar-track,
.log-list::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 3px;
}

.panel-tabs :deep(.el-tabs__content)::-webkit-scrollbar-thumb,
.log-list::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.panel-tabs :deep(.el-tabs__content)::-webkit-scrollbar-thumb:hover,
.log-list::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .platform-header {
    gap: 0.5vw;
  }
  
  .stat-item {
    gap: 0.8vw;
    padding: 1vh;
  }
  
  .log-time {
    min-width: 8vw;
  }
}

@media (max-width: 768px) {
  .panel-tabs :deep(.el-tabs__content) {
    padding: 1vh;
  }
  
  .data-item,
  .stat-item,
  .log-item,
  .metric-card {
    padding: 1vh;
  }
  
  .stat-value {
    font-size: 1.2rem;
  }
  
  .metric-value {
    font-size: 1.2rem;
  }
}
</style>